<template>
  <div class="step-three">
    <h3 class="pad-t-20">身份证信息</h3>
    <div class="mar-t-10">
      <div class="font-12 font-color-9">请确保身份证边框完整、图像清晰、光线均匀</div>
      <div class="font-12 font-color-9">请务必上传您本人的身份证照片，提现账号需要和注册身份证绑 定，否则将无法提现</div>
      <div class="flex flex-between">
        <div @click="clickUpload('positive', 'idCardPortraitPhotoUrl')">
          <upload-image ref="positive" text="身份证正面照" :imgSrc="idCardPortraitPhotoUrl" @uploadSuccess="positiveSuccess"></upload-image>
        </div>
        <div @click="clickUpload('back', 'idCardNationalEmblemPicUrl')">
          <upload-image ref="back" text="身份证反面照" :imgSrc="idCardNationalEmblemPicUrl" @uploadSuccess="backSuccess"></upload-image>
        </div>
      </div>
    </div>
    <div class="mar-t-20">
      <van-field :value="idCardRealName" label="姓名" placeholder="请输入真实姓名" :error-message="idCardRealName ? ' ' : realnameTip" @input="realnameInput" />
      <van-field :value="idCardNumber" label="身份证号码" maxlength=18 placeholder="请输入身份证号码" :error-message="idCardNumber ? ' ' : idCardNumTip" @input="idCardNumInput" />
      <van-field disabled :value="phone" label="联系电话" placeholder="请输入联系电话" :error-message="phone ? ' ' : phoneTip" />
    </div>
    <!-- 示例弹窗 -->
    <upload-examples :show="showExamples" :textData="textData" @closeExamples="closeExamples" @continueUplaod="continueUplaod"></upload-examples>
  </div>
</template>
<script>
import UploadImage from './upload-image'
import UploadExamples from './upload-examples'
export default {
  components: {
    UploadImage,
    UploadExamples
  },
  data() {
    return {
      idCardPortraitPhotoUrl: '',
      idCardNationalEmblemPicUrl: '',
      showExamples: false,
      idCardRealName: '',
      idCardNumber: '',
      phone: '',
      realnameTip: ' ',
      idCardNumTip: ' ',
      phoneTip: ' ',
      textData: {},
      idcardUp: {
        title: '身份证人像面上传规则',
        correct: '/images/store-idcard-up-ex1.png',
        asks: ['请拍摄/上传身份证原件，横向持机拍摄，使身份证充满你整个屏幕，保证照片清晰完整。'],
        error: [{
          src: '/images/store-idcard-up-ex2.png',
          text: '边框缺失'
        }, {
          src: '/images/store-idcard-up-ex3.png',
          text: '照片模糊'
        }, {
          src: '/images/store-idcard-up-ex4.png',
          text: '有水印'
        }]
      },
      idcardBack: {
        title: '身份证国徽面上传规则',
        correct: '/images/store-idcard-back-ex1.png',
        asks: ['请拍摄/上传身份证原件，横向持机拍摄，使身份证充满你整个屏幕，保证照片清晰完整。'],
        error: [{
          src: '/images/store-idcard-back-ex2.png',
          text: '边框缺失'
        }, {
          src: '/images/store-idcard-back-ex3.png',
          text: '照片模糊'
        }, {
          src: '/images/store-idcard-back-ex4.png',
          text: '有水印'
        }]
      },
      applyStore: {},
      uploadType: ''
    }
  },
  mounted() {
    // 取出缓存的值
    this.storeApply = this.$pt.getStorageSync('store-apply')
    let stepTwo = this.$pt.getStorageSync('applyStore')
    this.applyback = stepTwo
    this.idCardPortraitPhotoUrl = stepTwo.idCardPortraitPhotoUrl || ''
    this.idCardNationalEmblemPicUrl = stepTwo.idCardNationalEmblemPicUrl || ''
    this.idCardRealName = stepTwo.idCardRealName || ''
    this.idCardNumber = stepTwo.idCardNumber || ''
    this.phone = this.$pt.getStorageSync('temporaryPhone') || this.getPhone
  },
  methods: {
    realnameInput(e) {
      this.idCardRealName = e.mp.detail
      this.changeValue()
    },
    idCardNumInput(e) {
      this.idCardNumber = e.mp.detail
      this.changeValue()
    },
    closeExamples() {
      // 关闭示例窗口
      this.showExamples = false
    },
    clickUpload(type, e) {
      // 点击上传图片按钮
      switch (type) {
        case 'positive':
          this.textData = this.idcardUp
          break
        case 'back':
          this.textData.title = this.idcardBack
          break
        default:
          break
      }
      this.uploadType = type
      // 如果没有选择图片，展示提示案例
      if (!this[e]) {
        this.showExamples = true
        return
      }
      this.chooseImage(type)
    },
    continueUplaod() {
      // 看完案例继续上传
      this.chooseImage(this.uploadType)
    },
    chooseImage(type) {
      // 调用组件的选择图片方法
      this.$refs[type].chooseImage()
    },
    positiveSuccess(res) {
      // 身份证正面选择成功
      this.closeExamples()
      this.idCardPortraitPhotoUrl = res.tempFilePaths[0]
      this.changeValue()
    },
    backSuccess(res) {
      // 身份证国徽面选择成功
      this.closeExamples()
      this.idCardNationalEmblemPicUrl = res.tempFilePaths[0]
      this.changeValue()
    },
    changeValue() {
      let params = {
        idCardPortraitPhotoUrl: this.idCardPortraitPhotoUrl,
        idCardNationalEmblemPicUrl: this.idCardNationalEmblemPicUrl,
        idCardRealName: this.idCardRealName,
        idCardNumber: this.idCardNumber,
        phone: this.phone
      }
      this.$emit('change', params)
    },
    checkData() {
      if (!this.phone) {
        this.phoneTip = '请填写手机号'
        return false
      } else {
        return true
      }
    }
  }
}
</script>
<style lang="less" scoped>
.step-three{
  padding: 0 16px 40px;
  background-color: #FFF;
  h3{
    font-weight: bold;
    font-size: 20px;
  }
  .color-blue{
    color: #0577FF;
  }
  /deep/.van-popup{
    border-radius: 15px 15px 0 0;
  }
  /deep/.van-cell{
    padding: 16px 0 5px;
    &::after{
      left: 0;
    }
    .van-cell__title{
      font-size: 16px;
      color: #666;
      font-weight: bold;
      max-width: 102px!important;
      min-width: 102px!important;
    }
    .van-field__error-message{
      height: 13px;
      line-height: 13px;
      width: 155px;
      overflow:hidden;
      text-overflow:ellipsis;
      display:-webkit-box;
      -webkit-line-clamp:1;
      -webkit-box-orient:vertical;
      word-break:break-word;
    }
    .van-field__input{
      font-size: 16px;
    }
  }
}
</style>
